<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>

<head>
        <title>Tab Menu Group</title>

<style type="text/css">
#details {
	box-shadow:5px 10px 5px #999;
	height:100%;
	width:100%;
	color:yellow;
	background-color:#F23;
	padding:10px;
}
#features {
	box-shadow:5px 10px 5px #999;
	height:100%;
	width:100%;
	color:yellow;
	background-color:#246;
	padding:10px;
}
#opt {
	box-shadow:5px 10px 5px #999;
	height:100%;
	width:100%;
	color:yellow;
	background-color:#863;
	padding:10px;
}
#specs {
	box-shadow:5px 10px 5px #999;
	height:100%;
	width:100%;
	color:yellow;
	background-color:#390;
	padding:10px;
}
#t1 {
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	padding:0px 10px;
	display:inline-block;
	color:yellow;
	background-color:#F23;
}
#t2 {
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	padding:0px 10px;
	display:inline-block;
	color:yellow;
	background-color:#246;
}
#t3 {
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	padding:0px 10px;
	display:inline-block;
	color:yellow;
	background-color:#863;
}
#t4 {
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	padding:0px 10px;
	display:inline-block;
	color:yellow;
	background-color:#390;
}
</style>

</head>

<body>
                          <div style="display:block;">
                            <span id="t1" style="cursor:pointer" onClick="toggle_detail('details'); close_features('features'); close_options('opt'); close_specs('specs');">
                              <h3>Tab 1</h3>
                            </span>
                            <span id="t2" style="cursor:pointer" onClick="toggle_features('features'); close_detail('details'); close_options('opt'); close_specs('specs');">
                              <h3>Tab 2</h3>
                            </span>
                            <span id="t3" style="cursor:pointer" onClick="toggle_options('opt'); close_features('features'); close_detail('details'); close_specs('specs');">
                              <h3>Tab 3</h3>
                            </span>
                            <span id="t4" style="cursor:pointer" onClick="toggle_specs('specs'); close_features('features'); close_options('opt'); close_detail('details');">
                              <h3>Tab 4</h3>
                            </span>
                          </div>
                          
        <!-- Tab 1 -->  <table id="details" style="display:none;">
                              <tr>
                                <td valign="top">
                                </td>
                              </tr>
                            </table>
                            
        <!-- Tab 2 -->     <table id="features" style="display:none;">
                              <tr>
                                <td style="" valign="top">
                                </td>
                              </tr>
                            </table>
        <!-- Tab 3 -->  <table id="opt" style="display:none;">
                              <tr>
                                <td style="" valign="top">
                                </td>
                              </tr>
                            </table>
                          
        <!-- Tab 4 -->     <table id="specs" style="display:none;">
                              <tr>
                                <td style="width:auto;" valign="top">
                                    </td></tr>
                                  </table>
                                </td>
                              </tr>
                            </table>

<script type="text/javascript">
//<!--
    function toggle_detail(details) {
       var e = document.getElementById(details);
			 if(e.style.display == 'none') {
					e.style.display = 'block';
			 }else {
					e.style.display = 'none';
			 };
		};
    function toggle_features(features) {
       var e = document.getElementById(features);
			 if(e.style.display == 'none') {
					e.style.display = 'block';
			 }else {
					e.style.display = 'none';
			 };
		};
    function toggle_options(opt) {
       var e = document.getElementById(opt);
			 if(e.style.display == 'none') {
					e.style.display = 'block';
			 }else {
					e.style.display = 'none';
			 };
		};
    function toggle_specs(specs) {
       var e = document.getElementById(specs);
			 if(e.style.display == 'none') {
					e.style.display = 'block';
			 }else {
					e.style.display = 'none';
			 };
		};
// -------------------------------------------------		
		function close_detail(details) {
			var e = document.getElementById(details);
			if(e.style.display == 'block') {
				e.style.display = 'none' ;
			}else {
				null;
			};
		};
		function close_features(features) {
			var e = document.getElementById(features);
			if(e.style.display == 'block') {
				e.style.display = 'none' ;
			}else {
				null;
			};
		};
		function close_options(opt) {
			var e = document.getElementById(opt);
			if(e.style.display == 'block') {
				e.style.display = 'none' ;
			}else {
				null;
			};
		};
		function close_specs(specs) {
			var e = document.getElementById(specs);
			if(e.style.display == 'block') {
				e.style.display = 'none' ;
			}else {
				null;
			};
		};
//-->

</script>


</body>
</html>
